<template>
    <div class="mb-3 col-sm-6 col-md-4 item" :class="{'list-group-item': displayList}">
        <div class="thumbnail card">
        <div class="img-event intrinsic">
            <img :src="item.thumbnail_url" alt="" class="grow thumbnail-image card-img-top intrinsic-item p-3">
        </div>
        <div class="card-body">
            <router-link :to="'/eshop/goods/' + item.id" custom v-slot="{ navigate }" class="card-title">
                <h5 @click="navigate" role="link"><a>{{ item.title }}</a></h5>
            </router-link>
            <h6 class="card-subtitle mb-2 remain">{{ item.quantity }} left in stock</h6>

            <p class="card-text truncate">{{ item.description }}</p>

            <div class="row">
                <p class="col-6 lead">￥{{ item.price }}</p>
                <p class="col-6">
                    <button class="btn btn-success pull-right" :disabled="item.quantity === 0" @click="addItem">
                    加入购物车
                    </button>
                </p>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex'
import { ref } from 'vue'
export default {
    props: ['item', 'displayList'],
    // props: {
    //     item: Object,
    //     displayList: Object
    // },
    setup(props) {
        const store = useStore()
        const item = ref(props.item)
        const updateShoppingList = (order) => {
            store.dispatch('updateShoppingList', order)
        }
        const addItem = () => {
            const order = {
                item: Object.assign({}, item.value),
                quantity: 1,
                isAdd: true
            };
            updateShoppingList(order)
        }

        return {
            updateShoppingList,
            addItem
        }
    }
}
</script>

<style lang="scss" scoped>
div.card {
    height: 100%;
}

.card-text {
    font-size: 0.875rem;
}

.remain {
    color: #d17581;
}

.grow {
    transition: all .2s ease-in-out;
}

.grow:hover {
    transform: scale(1.1);
}

.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 30px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 1rem;
    border: 0;
    .thumbnail {
        display: inline-block;
        width: 100%;
    }
    .img-event {
        width: 20%;
        float: left;
        padding: 0 !important;
        margin: 0;
        height: auto;
    }

    .thumbnail-image {
        position: static;
    }

    .card-body {
        float: left;
        width: 80%;
        margin: 0;
    }

    @media (max-width: 767.98px) {
        .img-event {
            width: 30%;
            float: left;
            padding: 0 !important;
            margin: 0;
        }

        .card-body {
            float: left;
            width: 70%;
            margin: 0;
        }
    }
}
.item.list-group-item:before, .item.list-group-item:after {
    display: table;
    content: " ";
}

.item.list-group-item:after {
    clear: both;
}
</style>
